﻿<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height: 100px; border-bottom-width: 1px; padding: 10px; font-size: 14px;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Menu/ViewSealedSource" target="_blank">点击查看扩展代码</a>
        <br />
        js依赖项：
        <br />
        [query-1.11.0.js]、[jquery.jdirk.js]、[jquery.easyui.min.js]、[jeasyui.extensions.menu.js]
    </div>
    <div data-options="region:'center',border:false,title:'此处仅显示“功能演示”选项卡所示功能基于本扩展的实现源码'" style="padding: 15px; font-size: 14px;">
        <a href="~/Demos/ExtensionDemos/Menu/SealedDemo.rar" target="_self">下载本扩展功能演示Demo</a>
        <br />
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展方法API<br />
            本扩展功能属于“二次封装”，用于自动渲染和快速调用Menu。
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:10%;">名称</td>
                <td style="width:5%;">重写</td>
                <td style="width:10%;">参数</td>
                <td>描述</td>
            </tr>
            <tr>
                <td>createMenu</td>
                <td>否</td>
                <td>options</td>
                <td>
                    根据指定的属性创建 easyui-menu 对象；该方法定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>options: JSON 对象类型，参数属性继承 easyui-menu 控件的所有属性和事件（参考官方 API 文档），并在此基础上增加了如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>id      : 一个 String 对象，表示创建的菜单对象的 ID 属性。<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>name    : 一个 String 对象，表示创建的菜单对象的 name 属性。<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>hideOnUnhover   : 这是官方 API 中原有属性，此处调整其默认值为 false；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>hideDisabledItem: 一个 Boolean 值，默认为 false；该属性表示当菜单项的 disabled: true，是否自动隐藏该菜单项；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>event   :  表示引发生成菜单列表的动作事件对象；该参数可选；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>items: 一个 Array 对象，该数组对象中的每一个元素都是一个 JSON 格式对象用于表示一个 menu-item （关于 menu-item 对象属性，参考官方 API）；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>该数组中每个元素的属性，除 easyui-menu 中 menu-item 官方 API 定义的属性外，还增加了如下属性：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>hideDisabledItem: 该属性表示在当前子菜单级别下当菜单项的 disabled: true，是否自动隐藏该菜单项；一个 Boolean 值，默认取上一级的 hideDisabledItem 值；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>handler: 一个回调函数，表示点击菜单项时触发的事件；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>回调函数 handler 和回调函数 onclick 的签名都为 function(e, itemOpts, target)，其中：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>e       : 表示点击菜单列表中单个菜单项所触发的动作事件对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>itemOpts: 表示当前点击的菜单项的 options 选项；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>target  : 表示整个菜单控件的 HTML-DOM 对象。<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>函数中 this 指向触发事件的单个菜单项 HTML-DOM 对象本身<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>另，如果同时定义了 onclick 和 handler，则只处理 handler 而不处理 onclick，所以请不要两个回调函数属性同时使用。<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>children: 同上一级对象的 items 属性，为一个 Array 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>slideOut:   一个 Boolean 类型值，表示菜单是否以滑动方式显示出来；默认为 false；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>autoDestroy : Boolean 类型值，表示菜单是否在隐藏时自动销毁，默认为 true；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    options 参数也可直接定义为数组类型，即为 items 格式的 Array 对象；当 options 直接定义为 items 格式数组时，生成的 easyui-item 对象的其他属性则为系统默认值。<br />
                    返回值：返回一个 JSON 格式对象，该返回的对象中具有如下属性：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>menu: 依据于传入参数 options 构建出的菜单 DOM 元素对象，这是一个 jQuery 对象，该对象未初始化为 easyui-menu 控件，而只是具有该控件的 DOM 结构；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>options: 传入参数 options 解析后的结果，该结果尚未用于但可用于初始化 menu 元素。
                </td>
            </tr>
            <tr>
                <td>showMenu</td>
                <td>否</td>
                <td>options</td>
                <td>
                    根据指定的属性创建 easyui-menu 对象并立即显示出来；该方法定义的参数和本插件文件中的插件方法 createMenu 相同：<br />
                    注意：本方法与 createMenu 方法不同之处在于：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>createMenu: 仅根据传入的 options 参数创建出符合 easyui-menu DOM 结构要求的 jQuery DOM 对象，但是该对象并未初始化为 easyui-menu 控件；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>showMenu: 该方法在 createMenu 方法的基础上，对创建出来的 jQuery DOM 对象立即进行 easyui-menu 结构初始化，并显示出来。<br />
                    返回值：返回一个 jQuery 对象，该对象表示创建并显示出的 easyui-menu 元素，该返回的元素已经被初始化为 easyui-menu 控件。
                </td>
            </tr>
            <tr>
                <td>parseMenuItems</td>
                <td>否</td>
                <td>menuItems, args</td>
                <td>
                    将一个表示 easyui-menu 中菜单项集合的数组，解析成 $.easyui.showMenu 方法能够支持的菜单项数组格式。该方法定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>menuItems   : Array 数组格式，数组中的每个元素都是一个表示 menu-item 菜单项的 JSON-Object，该 JSON-Object 对象包含如下属性定义：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>id      : String 类型值，默认为 null ；表示菜单项的 ID ；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>text    : String 类型值，默认为 null ；表示菜单项的本文信息；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>iconCls : String 类型值，默认为 null ；表示菜单项的图标样式名称；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>href    : String 类型值，默认为 null ；表示菜单项指向的远程地址；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>disabled: Boolean 类型值，默认为 false；表示菜单项是否禁用；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>bold    : Boolean 类型值，默认为 false；表示该菜单项是否字体加粗；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>style   : JSON-Object 类型值，默认为 null；表示要附加到该菜单项的样式；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>hideOnClick     : Boolean 类型值，默认为 true；表示点击该菜单项后整个菜单是否会自动隐藏；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>hideDisabledItem: Boolean 类型值，默认为 false；该属性表示当菜单项的 disabled: true，是否自动隐藏该菜单项；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>handler : 回调函数，表示点击菜单项时触发的事件；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>onclick : 回调函数，表示点击菜单项时触发的事件；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>args        : 需要附加到解析回调函数的参数数组；该参数的作用在于：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>menu-item 中的任意属性可为具体的值，也可以为一个返回值的回调函数；但是在属性值为回调函数的情况下，函数签名为 function (e, itemOpts, target)<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>假设在这种情况下 args 的值为 [a, b, c]，则在调用 $.easyui.parseMenuItems 方法解析后，menu-item 属性的回调函数签名将变更为 function (e, itemOpts, target, a, b, c)；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>也就是说，参数 args 也将一个数组值作为 menu-item 属性回调函数的调用参数附加（而不是替换，因为原来的参数会保留）至函数的调用中；<br />
                    返回值：返回一个 Array 数组；该数组可用于作为 $.easyui.showMenu 方法调用的参数；<br />
                </td>
            </tr>
            <tr>
                <td>hideAllMenu</td>
                <td>否</td>
                <td>无</td>
                <td>隐藏/销毁 页面上所有的 easyui-menu 菜单项。</td>
            </tr>
        </table>
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            menu-item 扩展属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:15%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>hideOnClick</td>
                <td>Boolean 类型</td>
                <td>
                    表示点击该菜单项后整个菜单是否会自动隐藏
                </td>
                <td>true</td>
            </tr>
            <tr>
                <td>bold</td>
                <td>Boolean 类型</td>
                <td>
                    表示该菜单项是否字体加粗
                </td>
                <td>false</td>
            </tr>
            <tr>
                <td>style</td>
                <td>JSON-Object 类型</td>
                <td>
                    表示要附加到该菜单项的样式
                </td>
                <td>null</td>
            </tr>
        </table>
    </div>
</div>
